<!-- eslint-disable vue/no-multiple-template-root -->
<!--
 * @Author: 李林翰 3560839788@qq.com
 * @Date: 2024-03-30 10:21:04
 * @LastEditors: 李林翰 3560839788@qq.com
 * @LastEditTime: 2024-04-06 10:41:17
 * @FilePath: \deep-cafeteria-wx\src\pages\order\stationmaster\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <div class="big-bx">
      <div class="box1" style="background: rgba(255, 99, 6, 1)">当天订单</div>
      <div class="box1" @click="tourl('/pages/order/history/index')">
        历史订单
      </div>
    </div>
    <div style="display: flex; margin: 20rpx auto; width: 690rpx">
      <div style="margin: auto; display: flex">
        <div :class="[isActive && 'active', isHighlighted && 'box11']" @click="changeType">
          商户
        </div>
        <div :class="[!isActive && 'active', isHighlighted && 'box12']" @click="changeType">
          配送员
        </div>
      </div>
    </div>
    <!-- 配送员卡片 -->
    <div class="box6" v-show="!isActive ? true : false">
      <div class="top-box">
        <div style="margin: 0rpx 10rpx 10rpx 220rpx">配送任务</div>
        <div style="float: right; margin-right: -40rpx">刷新</div>
      </div>
      <div>
        <div class="from-box">
          <div class="from-item" v-for="(item, index) in from" :key="index">
            <div style="text-align: left">
              <text class="title3">{{ item.title1 }}</text>
              <text class="title7">李aaa</text>
            </div>
            <div style="display: flex; text-align: left">
              <div class="title3">{{ item.title2 }}</div>
              <div class="title7">{{ item.title2 ? 'li啊啊' : null }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商家卡片 -->
    <div class="shop-box" v-show="isActive ? true : false">
      <div class="from-box">
        <div class="from-item" v-for="(item, index) in from2" :key="index">
          <div style="text-align: left">
            <text class="title3">{{ item.title1 }}</text>
            <text class="title7">李aaa</text>
          </div>
          <div style="display: flex; text-align: left">
            <div class="title3">{{ item.title2 }}</div>
            <div class="title7">{{ item.title2 ? 'li啊啊' : null }}</div>
          </div>
        </div>
      </div>
    </div>
  </view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
const from = ref([
  {
    title1: '配送员：',
    title2: '送达时间：'
  },
  {
    title1: '手机号：',
    title2: '守摊人：'
  },
  {
    title1: '取餐店铺：',
    title2: '守摊时间：'
  },
  {
    title1: '取餐时间：',
    title2: '工作内容：'
  },
  {
    title1: '份数：',
    title2: '任务状态：'
  },
  {
    title1: '送餐楼栋：'
  }
])
const from2 = ref([
  {
    title1: '商家：',
    title2: '供餐楼栋：'
  },
  {
    title1: '手机号：',
    title2: '出餐时间：'
  },
  {
    title1: '状态：',
    title2: '份数：'
  },
  {
    title1: '店铺地址：'
  }
])
const isActive = ref(false)
const isHighlighted = ref(true)
const changeType = () => {
  isActive.value = !isActive.value
}
const tourl = (url) => {
  uni.navigateTo({
    url
  })
}
</script>
<style>
.big-bx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 60rpx;
  background: white;
}

page {
  background: rgba(246, 246, 246, 1);
}

.box1 {
  width: 160rpx;
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(204, 204, 204, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 30rpx;
}

.box11 {
  width: 120rpx;
  height: 64rpx;
  border-radius: 32rpx 0rpx 0rpx 32rpx;
  background: rgba(204, 204, 204, 1);
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box12 {
  width: 120rpx;
  height: 64rpx;
  border-radius: 0rpx 32rpx 32rpx 0rpx;
  background: rgba(204, 204, 204, 1);
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box6 {
  width: 690rpx;
  height: 448rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  margin: auto;
}

.top-box {
  width: 690rpx;
  height: 72rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.from-item {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0 0;
}

.from-box {
  padding: 0rpx 40rpx;
  margin: 20rpx 0rpx 0rpx;
}

.title3 {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
}

.title7 {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.active {
  background: rgba(255, 99, 6, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-box {
  width: 690rpx;
  height: 260rpx;
  border-radius: 20rpx;
  border: 2rpx solid rgba(255, 99, 6, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  margin: auto;
}
</style>
